<template>
	<view class="project-buy" :key="refreshKey">
		<view class="buy-title">投资项目名称：</view>
		<view class="buy-title-name">
			<image  src="../../static/img/projectBuy/title.png" ></image>
			<text>[{{ project.projectName }}]</text>
			  
			</view>
		<view class="recharge-amount animate__slideInLeft" style="animation-duration: 2s;">
			<view class="recharge-amount-text">投资金额</view>
			<view>
				<view class="recharge-amount-input">
				<input :placeholder="`投资金额`" type="number" v-model="buyInAmount" />
			</view>
			<view class="cell-line" ></view>
			<view class="recharge-amount-input-desc">
				账户资产 {{moneyFormat(memberInfo.investBalance)}} USDT
			</view>
			</view>
		</view>

		<view class="temp-desc">
			<view class="cell" >
				<view class="cell-left"> 
					起购金额
				</view>
				<view class="cell-center"></view>
				<view class="cell-right">
					{{project.minSubscribeAmount}} USDT
				</view>
			</view>
			<view class="cell" >
				<view class="cell-left"> 
					最大金额
				</view>
				<view class="cell-center"></view>
				<view class="cell-right">
					{{project.maxSubscribeAmount}} USDT
				</view>
			</view>
			<view class="cell" >
				<view class="cell-left"> 
					结算时间
				</view>
				<view class="cell-center"></view>
				<view class="cell-right">
					{{project.rebateModeName}}
				</view>
			</view>

		</view>
		<view class="coupon-block animate__slideInRight" style="animation-duration: 2s;">
			<!-- <view class="cell" @click="selectCoupon('1')">
				<view class="cell-left"> 
					现金券
				</view>
				<view class="cell-right">
					<text v-if='cashCoupon' style="color: #E4D494;"  >{{'￥' + cashCoupon.cashValue }}</text>
					<text v-else >请选择现金券</text>
					<image style="margin-left: 10rpx;" src="../../static/img/projectBuy/expand.png" ></image>
				</view>
			</view>
			<view class="cell-line" ></view>
			<view class="cell" @click="selectCoupon('2')">
				<view class="cell-left"> 
					加息券
				</view>
				<view class="cell-right">
					<text  v-if='additionalRateCoupon' style="color: #E4D494;" >{{additionalRateCoupon.additionalRate + '%'}}</text>
					<text v-else >请选择您需要使用的加息券</text>
					<image style="margin-left: 10rpx;" src="../../static/img/projectBuy/expand.png" ></image>
				</view>
			</view> -->
			<view class="cell-line" ></view>
			<view class="cell">
				<view class="cell-left"> 
					是否复投
				</view>
				<view class="cell-right">
					    <!-- <uv-radio-group v-model="continueInvest" placement="row" style="color: #E4D494;">
							<uv-radio :customStyle="{marginRight: '12px'}" name="1" label="不复投"></uv-radio>
							<uv-radio name="2" label="我要复投"></uv-radio>
						</uv-radio-group> -->
						<view class="cell-label" @click="()=>{continueInvest = '1'}">
							<image v-show="continueInvest !== '1'" src="../../static/img/projectBuy/notSelected.png" ></image>
							<image 
							v-show="continueInvest === '1'" src="../../static/img/projectBuy/selected.png"></image>
							<text>不复投</text>
						</view>
						<view class="cell-label" @click="()=>{continueInvest = '2'}">
							<image 
							v-show="continueInvest !== '2'" src="../../static/img/projectBuy/notSelected.png" ></image>
							<image  
							v-show="continueInvest === '2'" src="../../static/img/projectBuy/selected.png"></image>
							<text>我要复投</text>
						</view>
					
				</view>
			</view>

		</view>

		<view class="pay-way animate__slideInLeft" style="animation-duration: 2s;">
			<view class="pay-way-title">支付密码</view>
			<view class="pay-way-content">
				<input
					v-model="payPwd"
					placeholder="请输入您的支付密码"
					placeholder-class="input-placeholder"
					@tap="open()"
				/>
			</view>
		</view>

		  

		<!-- <view class="balance" @click="gotoPage('../balance/balance')">
			<view class="balance-label">账户资产（USDT）</view>
			<view class="balance-value">{{moneyFormat(memberInfo.investBalance)}}</view>
			<image src="/static/img/zichan.png" class="zichan"></image>
		</view> -->
		<!-- <uv-cell-group class="uv-cell-group-tbody">
			<uv-cell size="large">
				<template #title>
					<view class="cell-title">
						起购金额
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						￥{{project.minSubscribeAmount}}USDT</view>
				</template>
			</uv-cell>
			<uv-cell size="large">
				<template #title>
					<view class="cell-title">
						结息时间
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						按期结息
					</view>
				</template>
			</uv-cell>
			<uv-cell size="large">
				<template #title>
					<view class="cell-title" style="width: 340rpx;">
						投资金额<text style="font-size: 24rpx;">(最低起投￥{{project.minSubscribeAmount}})</text>
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<uv-input placeholder="请输入投资金额" border="none" inputAlign="right" type="number"
							v-model="buyInAmount"></uv-input>
					</view>
				</template>
			</uv-cell>
		</uv-cell-group> -->
		<!-- <uv-cell-group class="uv-cell-group-tbody" bor>
			<uv-cell size="large" :isLink="true" @click="selectCoupon('1')">
				<template #title>
					<view class="cell-title">
						现金券
					</view>
				</template>
				<template #value>
					<view class="cell-value cell-value-highlight">
						<text v-if='cashCoupon'>{{'￥' + cashCoupon.cashValue }}</text>
						<text v-else style="color: rgb(192, 196, 204);">请选择现金券</text>
					</view>
				</template>
			</uv-cell>
			<uv-cell size="large" :isLink="true" @click="selectCoupon('2')">
				<template #title>
					<view class="cell-title">
						加息券
					</view>
				</template>
				<template #value>
					<view class="cell-value cell-value-highlight">
						<text v-if='additionalRateCoupon'>{{additionalRateCoupon.additionalRate + '%'}}</text>
						<text v-else style="color: rgb(192, 196, 204);">请选择加息卷</text>
					</view>
				</template>
			</uv-cell>
		</uv-cell-group>

		<uv-cell-group class="uv-cell-group-tbody">
			<uv-cell size="large">
				<template #title>
					<view class="cell-title">
						到期复投
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<uv-radio-group v-model="continueInvest" placement="row">
							<uv-radio :customStyle="{marginRight: '12px'}" name="1" label="不复投"></uv-radio>
							<uv-radio name="2" label="我要复投"></uv-radio>
						</uv-radio-group>
					</view>
				</template>
			</uv-cell>
		</uv-cell-group>
		<uv-cell-group class="uv-cell-group-tbody" style="margin-bottom: 40rpx;">
			<uv-cell size="large">
				<template #title>
					<view class="cell-title">
						支付密码
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<uv-input placeholder="请输入支付密码" :password="true" border="none" inputAlign="right"
							v-model="payPwd"></uv-input>
					</view>
				</template>
			</uv-cell>
		</uv-cell-group> -->
		<view class="pay-btn animate__slideInRight" style="animation-duration: 2s;">
			<view class="fixed-bottom-inner">
				<!-- <button class="submit" @click="buyIn">立即投资</button> -->
				<button class="exchange-btn" @click="buyIn">确认支付</button> 
			</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="true" ref="numberPad"></number-jpan>
	</view>
</template>

<script>
	import common from '@/common/common'
	import numberJpan from "../../components/numberJpan/numberJpan.vue";
	export default {
		components:{
			'number-jpan':numberJpan
		},
		data() {
			return {
				id: '',
				project: '',
				continueInvest: '1',
				buyInAmount: '',
				payPwd: '',

				memberInfo: '',
				cashCoupon: '',
				additionalRateCoupon: '',
				refreshKey:0
			}
		},
		onLoad(option) {
			var that = this;
			that.id = option.id;
			that.findCanBuyProjectById();
			that.getMemberInfo();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			open(){
				this.$refs.numberPad.open()
				//this.$refs.numberPad.close()
			},
			closeChange(res){
				this.payPwd=res
			},
			selectCoupon(type) {
				var that = this;
				uni.$once('returnSelectedCoupon', function(data) {
					if (data.type == '1') {
						that.cashCoupon = data;
					} else {
						that.additionalRateCoupon = data;
					}
				});
				uni.navigateTo({
					url: '../coupon/coupon?type=' + type
				});
			},

			buyIn() {
				var that = this;
				if (that.buyInAmount == null || that.buyInAmount == '') {
					uni.showToast({
						title: "请输入投资金额",
						icon: "none"
					});
					return;
				}
				if (that.payPwd == null || that.payPwd == '') {
					uni.showToast({
						title: "请输入支付密码",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/buyInRecord/buyIn', {
					financialProjectId: that.id,
					buyInAmount: that.buyInAmount,
					payPwd: that.payPwd,
					cashCouponId: that.cashCoupon ? that.cashCoupon.id : '',
					additionalRateCouponId: that.additionalRateCoupon ? that.additionalRateCoupon.id : '',
					continueInvestFlag: this.continueInvest != '1',
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '买入成功',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../my/my"
								});
							}, 2000);
						}
					});
				});
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.memberInfo = res.data;
				});
			},

			moneyFormat(amount) {
				return common.moneyFormat(amount);
			},

			findCanBuyProjectById() {
				var that = this;
				uni.$uv.http.get('/financialProject/findCanBuyProjectById', {
					params: {
						id: that.id
					}
				}).then(res => {
					that.project = res.data;
				});
			},
			gotoPage(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.project-buy {
		padding:40rpx 32rpx 40rpx;
		.buy-title{
			font-weight: 400;
			font-size: 30rpx;
			color: #000;
			line-height:24rpx;
			text-align: left;
			padding-top: 20rpx;
		}
		.buy-title-name{
			padding-top: 20rpx;
font-weight: 600;
font-size: 28rpx;
color: hwb(29 39% 11%);
line-height: 28rpx;
display: flex;
align-items: center;
image{
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
}
		}

		.recharge-amount{
		margin-top: 40rpx;
		margin-bottom: 40rpx;
        border-radius: 28rpx;
		background: #FFF;
		padding: 32rpx 28rpx 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 186rpx;
		.cell-line{
			margin-top: 12rpx;
height: 2rpx;
background: rgba(255,255,255,0.1);
			}
		.recharge-amount-text{
			font-size: 24rpx;
			color: #000;
			line-height: 24rpx;
			text-align: left;
			
		}
		.recharge-amount-input{
			font-size: 24rpx;
			color: #000;
			display: flex;
			align-items: center;
			input{
				margin-left: 20rpx;
				font-size: 48rpx;
				color: #E4D494;
			}
		}
		.recharge-amount-input-desc{
			
		    padding-top: 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #000;
line-height: 24rpx;
text-align: left;
font-style: normal;


		}

	    }

		.temp-desc{
			.cell{
		display: flex;
		align-items: center;
        // height: 120rpx;
        // background: #18273D;
        // border-radius: 24rpx;
		padding:0 16rpx;
		margin-bottom: 20rpx;
		color: #000;
		.cell-left{
			margin-right: 16rpx;
		}
		.cell-center{
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600rpx;
		}
		.cell-right{ color: #000;
			display: flex;
			align-items: center;
			.cell-label{
			display: flex;
			align-items: center;
			}
			image{
			   width: 35rpx;
			   height: 35rpx;
			   margin-right: 16rpx;
			}
		}
			}

		}

		.coupon-block{
			background: #FFF;
			border-radius: 24rpx;
			padding:0 28rpx;
			.cell-line{
height: 2rpx;
background: rgba(255,255,255,0.1);
border-radius: 0px 0px 0px 0px;
			}
			.cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
        height: 92rpx;
		color: #000;
	    
		.cell-left{
			
		}
		.cell-right{ 
			display: flex;
			align-items: center;
			image{
			   width: 28rpx;
			   height: 28rpx;
			 }
			.cell-label{
			display: flex;
			align-items: center;
			margin-left: 16rpx;
			 image{
				width: 35rpx;
			   height: 35rpx;
			   margin-right: 16rpx;
			 }
			}
			
		 }
			}

		}

		.pay-way{
			padding-top: 32rpx;
		.pay-way-title{
			margin-bottom: 20rpx;
		}
		.pay-way-content{
			display: flex;
			align-items: center;
			justify-content: center;
        height: 120rpx;
        background: #FFF;
        border-radius: 24rpx;
		padding:0 20rpx;
		margin-bottom: 40rpx;
		.input-placeholder{

font-weight: 400;
font-size: 28rpx;
color: #000;
line-height: 28rpx;
letter-spacing: 2rpx;
text-align: left;
		}
		input{
			width: 100%;
		}
		
	}
	}

	
	.exchange-btn{
			color: #0B1327;
			font-weight: 900;
			font-size: 28rpx;
			height: 100rpx;
			line-height:100rpx;
			background:#F9C25F;
		    border-radius: 50rpx;
		}

	}

	.fixed-button-group {
		position: fixed;
		bottom: 30rpx;
		left: 0rpx;
		width: 100%;
	}

	.fixed-button-group-inner {
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.cell-title {
		color: #a4a4a4;
	}
	
	.cell-value {
		
	}

	.cell-value-highlight {
		color: rgb(27, 127, 180);
	}

	.balance-value {
		font-size: 52rpx;
		font-weight: 700;
		color: #fff;
		margin-top: 35rpx;
	}

	.balance-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
	}

	.balance {
		background: linear-gradient(to bottom right, #52b1de, #7dc4e6, #53b2df);
		height: 238rpx;
		padding: 0px 30rpx;
		box-sizing: border-box;
		padding-top: 48rpx;
		border-radius: 35rpx;
		margin-top: 34rpx;
		position: relative;
	}

	.zichan {
		width: 193rpx;
		height: 193rpx;
		position: absolute;
		top: -36rpx;
		right: -20rpx;
		opacity: 0.3;
		z-index: 1;
	}

	.uv-cell-group-tbody {
		border-radius: 28rpx;
		margin-top: 24rpx;
		background: #18273D;
		color: rgba(255,255,255,0.4);
	}

	.submit {
		background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		color: #fff;
		border: 0px;
		border-radius: 98rpx;
		height: 98rpx;
		width: 100%;
		display: block;
		margin: 0px auto;
		line-height: 98rpx;
		padding: 0px;
		box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);
		&::after {
			border: 0px solid #fff;
		}
	}

	.pay-btn {
		padding: 0px 40rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
	
	}

	.fixed-bottom-inner {
		padding: 0px 40rpx;
	}

	/deep/ .uv-cell__body {
		padding: 32rpx;
		box-sizing: border-box;
	}
</style>